<template>
	<view>
		<block v-if="videoData">
		  <!-- 第一层child  -->
		  <view v-if="Object.keys(videoData).length > 0" :class="videoData.class" :style="videoData.style">
		    <block v-for="(firstbannerItem, firstbannerIndex) in videoData.child" :key="firstbannerIndex">
		      <video
		        v-if="firstbannerItem.tagType == 'video'"
		        :style="firstbannerItem.style ? firstbannerItem.style : videoStyle"
		        :class="isIpx ? 'ios_mob' : 'an_mob'"
		        :src="firstbannerItem.src"
		        :autoplay="firstbannerItem.autoplay"
		        :controls="firstbannerItem.controls"
		        :enable-progress-gesture="firstbannerItem.enableProgressGesture"
		        :initial-time="firstbannerItem.initialTime"
		        :loop="firstbannerItem.loop"
		        :muted="firstbannerItem.muted"
		        :object-fit="firstbannerItem.objectFit"
		        :poster="firstbannerItem.poster"
		        :show-fullscreen-btn="firstbannerItem.showFullscreenBtn"
		        :show-play-btn="firstbannerItem.showPlayBtn"
            :show-mute-btn="firstbannerItem.showMuteBtn"
            :show-progress="fifthbannerItem.showProgress"
		      >
		        <block v-for="(secondbannerimageItem, secondbannerimageIndex) in firstbannerItem.child" :key="secondbannerimageIndex">
		          <view v-if="secondbannerimageItem.tagType == 'div'" :class="secondbannerimageItem.class" :style="secondbannerimageItem.style">
		            {{ secondbannerimageItem.text }}
		          </view>
		        </block>
		      </video>

		      <!-- tagType == 'div' -->
		      <view v-if="firstbannerItem.tagType == 'div'" :class="firstbannerItem.class" :style="firstbannerItem.style">
		        <!-- 第二层child -->
		        <block v-for="(secondbannerItem, secondbannerIndex) in firstbannerItem.child" :key="secondbannerIndex">
              <view v-if="secondbannerItem.tagType == 'div'" :class="secondbannerItem.class" :style="secondbannerItem.style">
                <!-- 第三层child -->
                <block v-for="(thirdbannerItem, thirdbannerIndex) in secondbannerItem.child" :key="thirdbannerIndex">
                  <navigator @click="navigatorClickHandle" :data-index="thirdbannerIndex"
                    v-if="thirdbannerItem.tagType == 'a'"
                    :url="thirdbannerItem.href"
                    :target="thirdbannerItem.target"
                    :class="thirdbannerItem.class"
                    :style="thirdbannerItem.style"
                    hover-class="none"
                  >
                    <block v-if="thirdbannerItem.text">{{ thirdbannerItem.text }}</block>

                    <block v-for="(fourthbannerItem, fourthbannerIndex) in thirdbannerItem.child" :key="fourthbannerIndex">
                    	 <video
                         v-if="fourthbannerItem.tagType == 'video'"
                         :class="fourthbannerItem.class"
                         :style="fourthbannerItem.style"
                         :src="fourthbannerItem.src"
                         :autoplay="fourthbannerItem.autoplay"
                         :controls="fourthbannerItem.controls"
                         :enable-progress-gesture="fourthbannerItem.enableProgressGesture"
                         :initial-time="fourthbannerItem.initialTime"
                         :loop="fourthbannerItem.loop"
                         :muted="fourthbannerItem.muted"
                         :object-fit="fourthbannerItem.objectFit"
                         :poster="fourthbannerItem.poster"
                         :show-fullscreen-btn="fourthbannerItem.showFullscreenBtn"
                         :show-play-btn="fourthbannerItem.showPlayBtn"
                         :show-progress="fourthbannerItem.showProgress"
                         :show-mute-btn="fourthbannerItem.showMuteBtn"
                    	 >
                    	 </video>

                      <image
                        v-if="fourthbannerItem.tagType == 'img'"
                        :style="fourthbannerItem.style"
                        :class="fourthbannerItem.class"
                        :src="fourthbannerItem.src"
                        :mode="fourthbannerItem.mode ? fourthbannerItem.mode : modeStyle"
                      >
                      </image>

                    </block>
                  </navigator>

                  <view v-if="thirdbannerItem.tagType == 'div'" :class="thirdbannerItem.class" :style="thirdbannerItem.style">
                    <!-- 第四层循环 tagType == 'div'-->
                    <block v-for="(fourthbannerItem, fourthbannerIndex) in thirdbannerItem.child" :key="fourthbannerIndex">
                      <navigator @click="navigatorClickHandle" :data-index="fourthbannerIndex"
                        v-if="fourthbannerItem.tagType == 'a'"
                        :url="fourthbannerItem.href"
                        :target="fourthbannerItem.target"
                        :class="fourthbannerItem.class"
                        :style="fourthbannerItem.style"
                        hover-class="none"
                      >
                        <block v-if="fourthbannerItem.text">{{ fourthbannerItem.text }}</block>
                        <block v-for="(fifthbannerItem, fifthbannerIndex) in fourthbannerItem.child" :key = "fifthbannerIndex">

                          <video
                           v-if="fifthbannerItem.tagType == 'video'"
                           :class="fifthbannerItem.class"
                           :style="fifthbannerItem.style"
                           :src="fifthbannerItem.src"
                           :autoplay="fifthbannerItem.autoplay"
                           :controls="fifthbannerItem.controls"
                           :enable-progress-gesture="fifthbannerItem.enableProgressGesture"
                           :initial-time="fifthbannerItem.initialTime"
                           :loop="fifthbannerItem.loop"
                           :muted="fifthbannerItem.muted"
                           :object-fit="fifthbannerItem.objectFit"
                           :poster="fifthbannerItem.poster"
                           :show-fullscreen-btn="fifthbannerItem.showFullscreenBtn"
                           :show-play-btn="fifthbannerItem.showPlayBtn"
                           :show-progress="fifthbannerItem.showProgress"
                           >
                           </video>

                          <image
                            v-if="fifthbannerItem.tagType == 'img'"
                            :style="fifthbannerItem.style"
                            :class="fifthbannerItem.class"
                            :src="fifthbannerItem.src"
                            :mode="fifthbannerItem.mode ? fifthbannerItem.mode : modeStyle"
                          >
                          </image>
                        </block>

                      </navigator>

                      <view v-if="fourthbannerItem.tagType == 'div'" :class="fourthbannerItem.class" :style="fourthbannerItem.style">
                        <!-- 第五层循环 -->
                        <block v-for="(fifthbannerItem, fifthbannerIndex) in fourthbannerItem.child" :key="fifthbannerIndex">
                          <navigator @click="navigatorClickHandle" :data-index="fifthbannerIndex"
                            v-if="fifthbannerItem.tagType == 'a'"
                            :url="fifthbannerItem.href"
                            :target="fifthbannerItem.target"
                            :class="fifthbannerItem.class"
                            :style="fifthbannerItem.style"
                            hover-class="none"
                          >
                            <block v-if="fifthbannerItem.text">{{ fifthbannerItem.text }}</block>
                          </navigator>

                          <image
                            v-if="fifthbannerItem.tagType == 'img'"
                            :mode="fifthbannerItem.mode ? fifthbannerItem.mode : modeStyle"
                            :src="fifthbannerItem.src"
                            :class="fifthbannerItem.class"
                            style="height: auto;"
                            :style="fifthbannerItem.style"
                          ></image>

                          <h2 v-if="fifthbannerItem.tagType == 'h2'" :style="fifthbannerItem.style" :class="fifthbannerItem.class">{{ fifthbannerItem.text }}</h2>

                          <p v-if="fifthbannerItem.tagType == 'p'" :style="fifthbannerItem.style" :class="fifthbannerItem.class">{{ fifthbannerItem.text }}</p>
                        </block>

                      </view>

                      <h2 v-if="fourthbannerItem.tagType == 'h2'" :style="fourthbannerItem.style" :class="fourthbannerItem.class">{{ fourthbannerItem.text }}</h2>

                      <p v-if="fourthbannerItem.tagType == 'p'" :style="fourthbannerItem.style" :class="fourthbannerItem.class">{{ fourthbannerItem.text }}</p>

                    </block>
                  </view>

                  <h2 v-if="thirdbannerItem.tagType == 'h2'" :class="thirdbannerItem.class" :style="thirdbannerItem.style">{{ thirdbannerItem.text }}</h2>

                  <p v-if="thirdbannerItem.tagType == 'p'" :style="thirdbannerItem.style" :class="thirdbannerItem.class">{{ thirdbannerItem.text }}</p>

                  <label v-if="thirdbannerItem.tagType == 'label'" :class="thirdbannerItem.class" :style="thirdbannerItem.style">{{ thirdbannerItem.text }}</label>

                </block>
              </view>

              <h2 v-if="secondbannerItem.tagType == 'h2'" :class="secondbannerItem.class" :style="secondbannerItem.style">{{ secondbannerItem.text }}</h2>

              <p v-if="secondbannerItem.tagType == 'p'" :style="secondbannerItem.style" :class="secondbannerItem.class">{{ secondbannerItem.text }}</p>

              <label v-if="secondbannerItem.tagType == 'label'" :class="secondbannerItem.class" :style="secondbannerItem.style">{{ secondbannerItem.text }}</label>

              <!-- a和里面的child -->
		          <navigator @click="navigatorClickHandle" :data-index="secondbannerIndex"
		            v-if="secondbannerItem.tagType == 'a'"
		            :url="secondbannerItem.href"
		            :target="secondbannerItem.target"
		            :class="secondbannerItem.class"
		            :style="secondbannerItem.style"
		            hover-class="none"
		          >
		            <block v-if="secondbannerItem.text">{{ secondbannerItem.text }}</block>
		            <block v-for="(thirdbannerItem, thirdbannerIndex) in secondbannerItem.child" :key="thirdbannerIndex">
		              <image
		                v-if="thirdbannerItem.tagType == 'img'"
		                :mode="thirdbannerItem.mode ? thirdbannerItem.mode : modeStyle"
		                :src="thirdbannerItem.src"
		                :class="thirdbannerItem.class"
		                style="height: auto;"
		                :style="thirdbannerItem.style"
		              ></image>
		            </block>
		          </navigator>

		        </block>
		      </view>

          <!-- tagType == 'a' -->
          <navigator @click="navigatorClickHandle" :data-index="firstbannerIndex"
            v-if="firstbannerItem.tagType == 'a'"
            :url="firstbannerItem.href"
            :target="firstbannerItem.target"
            :style="firstbannerItem.style"
            :class="firstbannerItem.class"
            hover-class="none"
          >
            <block v-if="firstbannerItem.text">{{ firstbannerItem.text }}</block>
            <!-- 第二层child -->
            <block v-for="(secondbannerItem, secondbannerIndex) in firstbannerItem.child" :key="secondbannerIndex">
              <image
                v-if="secondbannerItem.tagType == 'img'"
                :mode="secondbannerItem.mode ? secondbannerItem.mode : modeStyle"
                :src="secondbannerItem.src"
                :class="secondbannerItem.class"
                style="height: auto;"
                :style="secondbannerItem.style"
              ></image>
              <h2 v-if="secondbannerItem.tagType == 'h2'" :class="secondbannerItem.class" :style="secondbannerItem.style">{{ secondbannerItem.text }}</h2>
            </block>
          </navigator>
          <!-- tagType == 'img' -->
          <image
            v-if="firstbannerItem.tagType == 'img'"
            :mode="firstbannerItem.mode ? firstbannerItem.mode : modeStyle"
            :src="firstbannerItem.src"
            :class="firstbannerItem.class"
            style="height: auto;"
            :style="firstbannerItem.style"
          ></image>

		      <!-- tagType == 'h2' -->
		      <view
		        v-if="firstbannerItem.tagType == 'h2' || firstbannerItem.tagType == 'h1' || firstbannerItem.tagType == 'h3'"
		        :class="firstbannerItem.class"
		        :style="firstbannerItem.style"
		      >
		        <block v-if="firstbannerItem.text">{{ firstbannerItem.text }}</block>
		      </view>

		      <!-- tagType == 'p' -->
		      <view v-if="firstbannerItem.tagType == 'p'" :class="firstbannerItem.class" :style="firstbannerItem.style">
		        <block v-if="firstbannerItem.text">{{ firstbannerItem.text }}</block>
		        <block v-for="(secondbannerItem, secondbannerIndex) in firstbannerItem.child" :key="secondbannerIndex">
		          <navigator @click="navigatorClickHandle" :data-index="secondbannerIndex"
		            v-if="secondbannerItem.tagType == 'a'"
		            :url="secondbannerItem.href"
		            :target="secondbannerItem.target"
		            :class="secondbannerItem.class"
		            :style="secondbannerItem.style"
		            hover-class="none"
		          >
		            {{ secondbannerItem.text }}
		          </navigator>
		        </block>
		      </view>

		    </block>
		  </view>
		</block>
	</view>
</template>

<script>
  import {
    SYSTEM_INFO,
  } from '@/utils/constant';
	export default {
    props:{
      videoData: Object,
    },
		data() {
			return {
				windowHeight: 0, // 屏幕高度
				screenHeight: 0,
				windowWidth: 0,
				swpierHeight: '',
				videoStyle:'',
			};
		},

    created() {
      let that = this;
      let systemInfo = uni.getStorageSync(SYSTEM_INFO);
      that.windowHeight = systemInfo.windowHeight;
      that.windowWidth = systemInfo.windowWidth;
      // 视频宽高 1:1
      that.videoStyle = 'height:' + that.windowWidth + 'px' + ';' + 'width:' + that.windowWidth + 'px';
      that.swpierHeight = 'height:' + systemInfo.windowHeight + 'rpx';
      // 高
      that.screenHeight = systemInfo.screenHeight;
    },

    methods:{
      navigatorClickHandle(e){
        let index = e.target.dataset.index || e.currentTarget.dataset.index;
      },
    },
	}
</script>

<style lang="less">

</style>
